<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>文章内容详情</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../ui/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../ui/layuimini/css/public.css" media="all">
    <style>

    </style>
</head>
<body>
<div class="layui-form layuimini-form" lay-filter="candyForm">
    <input name="id" id="id" style="display: none;"/>
    <input name="articleContentId" id="articleContentId" style="display: none;"/>
    <blockquote class="layui-elem-quote layui-text">
        <div class="layui-row">
            <div class="layui-col-xs9">
                <div class="layui-nav-title" id="title"></div>
                <div class="layui-text" id="description"></div>
            </div>
            <div class="layui-col-xs3" style="text-align: right">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </blockquote>
    <div class="layui-form-item">
        <textarea name="content" id="content" style="display: none;"></textarea>
        <!--用当前元素来控制高度-->
        <div id="contentDiv" style="height:100%">
        </div>
    </div>
</div>
<script src="../../../ui/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../../ui/layuimini/js/lay-config.js"></script>
<script src="../../../ui/layuimini/js/lay-module/wangEditor/wangEditor.min.js"></script>
<script>
    layui.use(['form','auth','layedit'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        const E = window.wangEditor
        const editor = new E("#contentDiv")
        editor.config.height = totalHeight-160;
        // 或者 const editor = new E(document.getElementById('div1'))
        var totalHeight = window.innerHeight || document.body.clientHeight
        var id = getQueryString("id");
        var submitType="POST";
        var api="/api/cms/article-content";
        if(typeof(id)!="undefined" && id!=null && id.length>=0)
        {
            var user = layui.data('user');
            editor.config.uploadImgServer = '/api/sys/attachment/upload'
            editor.config.uploadImgHeaders = {
                'Authorization': "Bearer " + user.token
            };
            editor.config.uploadFileName = 'files';
            editor.config.uploadImgParams = {
                'ralationId': id,
                'relationTag': 'content_image',
                'isAuthorize': '0',
                'remarks': '内容图片',
            };
            editor.config.uploadImgHooks = {
                // 图片上传并返回了结果，想要自己把图片插入到编辑器中
                // 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
                customInsert: function(insertImgFn, result) {
                    // result 即服务端返回的接口
                    console.log('customInsert', result)
                    if(result.code==200) {
                        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                        var files = result.data.files;
                        for(var i = 0; i<files.length;i++)
                        {
                            insertImgFn("/api"+files[i]);
                        }
                    }
                    else {
                        layer.alert(result.msg);
                    }
                }
            }
            editor.create();
            var settings = {
                "url": api+"/"+id,
                "method": "GET"
            };
            $.ajax(settings).done(function (res) {
                form.val("candyForm", res.data);
                $("#title").html(res.data.title);
                $("#description").html(res.data.description);
                if(res.data.articleContent!=null)
                {
                    $("#articleContentId").val(res.data.articleContent.id);
                    editor.txt.html('<p>'+res.data.articleContent.content+'</p>')
                }
            });
            submitType="PUT"
        }
        else {
            editor.create();
        }

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            var formData={};
            console.log(JSON.stringify(data.field));
            formData.id=data.field.id;
            formData.articleContent={};
            formData.articleContent.id=data.field.articleContentId;
            formData.articleContent.content=editor.txt.html();
			var settings = {
			  "url": api,
			  "method": submitType,
              "contentType":"application/json",
			  "data": JSON.stringify(formData),
			};

			$.ajax(settings).done(function (response) {

			    if(response.code==200)
                {
                    var iframeIndex = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(iframeIndex);
                    parent.reload();
                }
			    else
                {
                    layer.alert(response.msg,{
                        icon: 2
                    });
                }
			});
            return false;
        });
    });

</script>
</body>
</html>